<template>
	<view class="fui-wrap" :style="`padding-bottom:${safebottom}rpx;`">
		<fui-list>
			<fui-list-cell v-for="(item,index) in list" arrow :key="index" @click="checkSentrybox(item)">
				<view class="item">
					<view class="line">
						<fui-text text="通道名称：" color="#afafaf" :size="28"></fui-text>
						<fui-text :text="`${item.title}`" type="black" size="28" block></fui-text>
					</view>
					<view class="line">
						<fui-text text="序列号：" color="#afafaf" :size="28"></fui-text>
						<fui-text :text="`${item.serialno}`" type="black" size="28" block></fui-text>
					</view>
					<view class="lianjie">
						<view class="lian">
							<fui-text text="启用状态：" color="#afafaf" :size="28"></fui-text>
							<fui-tag v-if="item.status=='normal'" text="正常" type="success"></fui-tag>
							<fui-tag v-if="item.status=='hidden'" text="禁用" type="danger"></fui-tag>
						</view>
						<view class="lian">
							<fui-text text="连接状态：" color="#afafaf" :size="28"></fui-text>
							<fui-tag v-if="item.online" text="在线" type="success"></fui-tag>
							<fui-tag v-else text="离线" type="danger"></fui-tag>
						</view>
						<view class="lian">
							<fui-text text="云在线：" color="#afafaf" :size="28"></fui-text>
							<fui-tag v-if="item.cloud" text="在线" type="success"></fui-tag>
							<fui-tag v-else text="离线" type="danger"></fui-tag>
						</view>
					</view>
				</view>
			</fui-list-cell>
		</fui-list>
		<fui-empty v-if="list.length===0" :src="`${baseUrl}assets/img/miniapp/empty.png`" title="暂无数据!" :marginTop="200"></fui-empty>
		<toolbar :current="1"></toolbar>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import toolbar from './components/toolbar.vue';
	export default {
		components:{
			toolbar:toolbar
		},
		data() {
			return {
				baseUrl:baseUrl,
				safebottom:0,
				list:[]
			}
		},
		onPullDownRefresh() {
			this.getBarrier(function(){
				uni.stopPullDownRefresh();
			});
		},
		onLoad() {
			let that=this;
			uni.getSystemInfo({
			  success: function (info) {
				that.safebottom=info.safeAreaInsets.bottom*2+100+30;
			  }
			});
			this.getBarrier();
		},
		methods: {
			...methods,
			getBarrier:function(callback=false){
				this.$get('parking/screen/barrier').then(res=>{
					this.list=res;
					if(callback){
						callback();
					}
					this.online();
				});
			},
			online:function(){
				let ids=[];
				for(let i=0;i<this.list.length;i++){
					ids.push(this.list[i].id);
				}
				uni.showLoading({
					title:'测试连接中..'
				});
				this.$get('parking/screen/online',{ids:ids.join(',')}).then(res=>{
					let list=this.list;
					for(let i=0;i<list.length;i++){
						if(res[list[i].serialno].online){
							list[i].online=true;
						}
						if(res[list[i].serialno].cloud){
							list[i].cloud=true;
						}
					}
					uni.hideLoading();
				});
			},
			checkSentrybox:function(item){
				let token=uni.getStorageSync('token');
				let url=baseUrl+'h5/#/pages/parking/monitor?barrier_id='+item.id+'&token='+token;
				url=encodeURIComponent(url);
				this.$navigateTo('index/webview?url='+url);
			}
		}
	}
</script>

<style lang="scss" scoped>
.item{
	display: flex;
	flex-wrap: wrap;
	.line{
		display: flex;
		align-items: center;
		width:100%;
		height: 70rpx;	
	}
	.lianjie{
		display: flex;
		width:100%;
		justify-content: space-between;
		margin-top: 20rpx;
	}
}
</style>